<!-- 门诊收入 -->
<template>
    <div id="outpatientRevenue"></div>
</template>
<script>
import * as echarts from "echarts";
import { getOutpatientRevenueData } from "../../commonJs/data";
import Mock from 'mockjs'
export default {
    data() {
        return {};
    },
    mounted() {
        // getOutpatientRevenueData(this.setEcharts);
        this.setEcharts()
    },
    methods: {
        //设置echarts
        setEcharts() {
            const data = [Mock.Random.integer(40000, 50000),
            Mock.Random.integer(30000, 35000),
            Mock.Random.integer(20000, 30000),
            Mock.Random.integer(20000, 31000),
            Mock.Random.integer(3000, 10000),]


            // const arr = new Array(5).fill(0).map(() => Mock.Random.natural(1000, 10000));
            let formData = [];
            data.forEach((item) => {
                // formData.push(parseInt(item.VALUE1));
                formData.push(parseInt(item));
            });
            let outpatientRevenue = echarts.init(
                document.getElementById("outpatientRevenue")
            );
            var colorArray = [
                {
                    top: "#ffa800", //黄
                    bottom: "rgba(11,42,84,.3)",
                },
                {
                    top: "#1ace4a", //绿
                    bottom: "rgba(11,42,84, 0.3)",
                },
                {
                    top: "#4bf3ff", //蓝
                    bottom: "rgba(11,42,84,.3)",
                },
                {
                    top: "#4f9aff", //深蓝
                    bottom: "rgba(11,42,84,.3)",
                },
                {
                    top: "#b250ff", //粉
                    bottom: "rgba(11,42,84,.3)",
                },
            ];
            let option = {
                tooltip: {
                    show: true,
                    formatter: "{b}:{c}",
                },
                grid: {
                    left: "1%",
                    top: "0%",
                    right: "14%",
                    bottom: "0%",
                    containLabel: true,
                },

                xAxis: {
                    type: "value",
                    show: false,

                    axisTick: {
                        show: false,
                    },
                    axisLine: {
                        show: false,
                        lineStyle: {
                            color: "#fff",
                        },
                    },
                    splitLine: {
                        show: false,
                    },
                },
                yAxis: [
                    {
                        type: "category",
                        axisTick: {
                            show: false,
                            alignWithLabel: false,
                            length: 5,
                        },
                        splitLine: {
                            //网格线
                            show: false,
                        },
                        inverse: "true", //排序
                        axisLine: {
                            show: false,
                            lineStyle: {
                                color: "#fff",
                            },
                        },
                        axisLabel: {
                            inside: false,
                            textStyle: {
                                color: "#fff",
                                fontWeight: "normal",
                                fontSize: "16",
                            },
                        },
                        fontSize: 16,
                        data: [
                            "人民医院",
                            "二院",
                            "中医院",
                            "妇幼保健",
                            "乡镇卫生院",
                        ],
                    },
                ],
                series: [
                    {
                        name: "能耗值",
                        type: "bar",
                        label: {
                            normal: {
                                fontSize: 16,
                                show: true,
                                position: "right",
                                formatter: "{c}元",
                                textStyle: {
                                    color: "white", //color of value
                                },
                            },
                        },

                        itemStyle: {
                            normal: {
                                show: true,
                                color: function (params) {
                                    let num = colorArray.length;
                                    return {
                                        type: "linear",
                                        colorStops: [
                                            {
                                                offset: 0,
                                                color: colorArray[
                                                    params.dataIndex % num
                                                ].bottom,
                                            },
                                            {
                                                offset: 1,
                                                color: colorArray[
                                                    params.dataIndex % num
                                                ].top,
                                            },
                                        ],
                                        //globalCoord: false
                                    };
                                },
                                barBorderRadius: 50,
                                borderWidth: 0,
                                borderColor: "#333",
                            },
                        },
                        barGap: "0%",
                        barCategoryGap: "40%",
                        data: formData,
                    },
                ],
            };
            outpatientRevenue.setOption(option);
        },
    },
};
</script>
<style lang="scss" scoped>
#outpatientRevenue {
    width: 100%;
    height: 100%;
    padding-top: 10px;
}
</style>